<template>
  <div class="main-foods">
    <ul>
      <li v-for="item in recommendList2" :key="item">
        <img :src="item.commodity" alt="" />
        <p class="text22">{{ item.title }}</p>
        <p class="price">￥{{ item.price }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendList2: [
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZSHjf.png",
          title: "爱啃拿 鸭肉梨天然五谷犬犬粮低泪痕肠胃低敏感2Kg/6Kg/11.4Kg",
          price: "209",
        },
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZSjEQ.png",
          title: "Annamaet 安娜玛特 天然狗粮 无谷深海鱼 冰水精华犬粮 5磅/25磅",
          price: "369",
        },
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZSx4s.png",
          title: "牛顿 T28低升糖系列犬期犬 粮去骨鳟鱼 三文鱼狗粮1.82Kg/6Kg",
          price: "588",
        },
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZSOHg.png",
          title: "卡比 狗粮卡比四种肉原味全犬粮天然浪 狗狗主粮 44磅",
          price: "879",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
// 口碑推荐四张图片排版
.main-foods {
  ul {
    width: 100%;
    // height: 168px;
    display: flex;
    justify-content: space-around;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
    li {
      margin-left: 5px;
      img {
        width: 70px;
        height: 70px;
        margin: 15px 0;
      }
      .text2 {
        color: #000;
        // font-weight: bolder;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
      .text22 {
        color: #000;
        width: 70px;
        font-size: 14px;
        // font-weight: bolder;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
      .price {
        color: red;
        margin: 10px 0;
      }
    }
  }
}
</style>
